<!DOCTYPE html>
<html lang="en" style="font-size: 20px;">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>底部弹出选项卡</title>
    <style>
         *{
            padding: 0;
            margin: 0;
        }
        .head-nav{
            display: flex;
            justify-content: space-between;
            padding: 10px;
            border-bottom: 1px solid #EEF0F4;
        }

        .list{
            margin: 20px;
        }
        .list ul li{
            list-style: none;
            height: 38px;
            line-height: 38px;
            background: #F7F8FA;
            margin: 10px 0;
            padding: 0px 10px;
            border-radius: 20px;
            font-weight: bold;
            font-size: 14px;
        }
        .list ul li:hover{
            background: #EEF0F4
        }


        .customPopup{
            /* position: absolute;
            left: 0rem;
            right: 0rem;
            bottom: 0rem; */
            overflow: hidden;
            height: 100%;
        }
        .customPopup .popup-title{
            padding:0.5rem 0rem;
            text-align: center;
            font-size: 0.8rem;
        }
        .customPopup .popup-list{
            position: absolute;
            left: 0rem;
            right: 0rem;
            bottom: 0rem;
            z-index: 900;
            background: #fff;
            border-top-left-radius: 0.8rem;
            border-top-right-radius: 0.8rem;
        }
        .customPopup .popup-list ul{
            max-height: 7.8rem;
            overflow-y: scroll;
        }
        .customPopup .popup-list ul::-webkit-scrollbar { 
            display: none;
        }
        .customPopup .popup-list ul li{
            padding: 0.5rem;
            font-size: 0.7rem;
            list-style: none;
        }
        .customPopup .popup-list ul li:active{
            background: #F9F9FB;
        }
        .customPopup .popup-list .cancel{
            text-align: center;
            background: #FE7000;
            color: #fff;
            margin: 0.5rem;
            padding: 0.5rem;
            border-radius: 0.5rem;
            font-size: 0.8rem;
        }
        .customPopup .default{
            background: rgba(20, 20, 20, 0.8);
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            display: none;
            z-index: 100;
        }

    </style>
</head>
<body>
    <div class="head-nav">
        <div onclick="history.go(-1)">《</div>
        <div>Popup 底部弹出选项卡</div>
        <div></div>
    </div>
    <div class="list">
        <ul>
            <li class="bottomTab">底部弹出选项卡</li>
            <li class="leftTab">左侧弹出选项卡</li>
        </ul>
    </div>

    <div class="customPopup" id="bottomPopup" data-type="bottom">
        <div class="popup-list">
            <div class="popup-title">订单取消</div>
            <ul>
                <li>我不想买了</li>
                <li>信息填写错误，重新拍</li>
                <li>同城见面交易</li>
                <li>其他原因</li>

                <li>我不想买了</li>
                <li>信息填写错误，重新拍</li>
                <li>同城见面交易</li>
                <li>其他原因</li>
            </ul>
            <div class="cancel">暂不取消</div>
        </div>
        <div class="default"></div>
    </div>


    


    
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
    // 自定义底部弹框
    function Popup(id){
        var _this = this;
        this.id = id;
        var container = document.getElementById(id);
        this.box = container.children[0];                 // .popup-list
        this.list = container.children[0].children[1];    // ul
        this.listName = `#${id} .popup-list`;
        this.default = `#${id} .default`;

        this.listHeight = container.children[0].offsetHeight + "px";
        this.box.style.bottom = "-"+this.listHeight;

        // 选中  
        this.list.addEventListener("click",function(event){
            var e = event.target;
            console.log(e.innerText)
            _this.abrogate()
        })
        // 暂不取消
        $(".cancel").click(function(){
          _this.abrogate()
        })
    }
    // 触发
    Popup.prototype.trigger = function(){
        $(this.listName).animate({
            "bottom": "0px"
        },500)
        $(this.default).fadeIn()
    }
    // 关闭
    Popup.prototype.abrogate = function(){
        $(this.listName).animate({
            "bottom": -$(this.listName).height()
        },500)
        $(this.default).fadeOut()
    } 


    var bottomPopup = new Popup("bottomPopup")
    $(".bottomTab").click(function(){
      bottomPopup.trigger()
    })
  
    </script>
</body>
</html>